<template>
  <a-sub-menu :key="menuInfo.name" v-bind="$props" v-on="$listeners">
    <span slot="title">
      <router-link :to="menuInfo.path">
        <a-icon :type="menuInfo.meta.icon" v-if="menuInfo.meta.icon" />
        <span>
          {{ menuInfo.title || menuInfo.meta.title }}
        </span>
      </router-link>
    </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item v-if="!item.children" :key="item.name">
        <router-link :to="item.path">
          <a-icon :type="item.meta.icon" v-if="item.meta.icon" />
          <span>{{ item.title || item.meta.title }}</span>
        </router-link>
      </a-menu-item>
      <sub-menu v-else :key="item.name" :menu-info="item" />
    </template>
  </a-sub-menu>
</template>
<script>
import { Menu } from "ant-design-vue";

export default {
  name: "SubMenu",
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>